<template>
    <el-table :data="data" row-key="_id" :header-cell-style="{
        backgroundColor: '#e5eeff',
        color: '#515a6e',
        fontWeight: 'normal'
    }" @selection-change="handleSelectionChange">
        <!-- 表格中的复选框 -->
        <el-table-column v-if="checkbox" type="selection" width="55" />

        <el-table-column v-for="item in columns" :label="item.label" :prop="item.prop">
            <template v-if="$slots[item.prop]" #default="scope">
                <slot :name="item.prop" :row="scope.row"></slot>
            </template>
        </el-table-column>

    </el-table>
    <div v-if="pageData" class="page-position">
        <el-pagination v-model:current-page="pageData!.currentPage" v-model:page-size="pageData!.pageSize"
            :total="total" :page-sizes="[5, 10, 20, 30, 50]" :background="true"
            layout="total, sizes, prev, pager, next, jumper" />
    </div>
</template>

<script setup lang="ts">

const emit = defineEmits(['onCheckboxChange']);

type ColumnItem = {
    label: string;
    prop: string;
}

const { data = [], columns = [], checkbox = false } = defineProps<{
    data: any[],
    columns: ColumnItem[],
    total?: number,
    checkbox?: boolean
}>();

const pageData = defineModel<PageQuery>();

// 当复选框发生改变时执行
const handleSelectionChange = (val: any[]) => {
    // 调用父组件的方法，将选中的数据传给父组件
    emit('onCheckboxChange', val);
}
</script>

<style scoped>
.page-position {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>